<template>
  <div class="header">
    <p  @click="back" class="back">
      <svg-icon icon-class="left"/>
      {{$t('appCenter.back')}}
    </p>

    <div class="title">
      <p>
        {{childName}}
      </p>
    </div>

    <p class="sure">&nbsp;</p>
  </div>
</template>
<script>
export default {
  name: 'AppHeader',
  props: {
    childName: String,
    default: ''
  },
  methods: {
    back() {
      this.$router.go(-1)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import "../../../../commom/scss/mixin";
  @import "../../../../commom/scss/varible";
  .header {
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    background: $baseColor;
    @include border-bottom-1px($borderBottom);
    line-height: 44px;
    .back{
      font-size: 16px;
      line-height: 44px;
      color: $mainColor;
      flex: 0 0 60px;
    }
    .title{
      font-size: 16px;
      flex: 1 0 auto;
      position: relative;
      p{
        position: absolute;
        text-align: center;
        top: 0;
        left: 0;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .sure{
     flex: 0 0 50px;
    }
  }
</style>
